<script setup>
import { ref, onMounted, readonly, watch } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";

const route = useRoute();

const id = ref(route.query.id);
const I18n = useI18n();
const { locale } = useI18n();

const productName = ref("");
const router = useRouter();
// 跳转页面
const jumpTo = (path) => {
  router.push(path);
  changeShowType(false);
};

// 显示类别
let showType = ref(false);

// 一级类别
let typeList = ref([]);
// 当前正在选中的一级分类
let activeType = ref(null);
// 二级类别
let subTypeList = ref([]);

const nowCategory = ref({});

// 修改二级类别
const changeSubType = (item) => {
  nowCategory.value = item;
  activeType.value = item.id;
};

// 显示隐藏类别
const changeShowType = (state) => {
  showType.value = state;
};

const categoryList = ref([]);
const getCategoryList = async () => {
  try {
    const res = await axios.get(`${apiUrl}/category`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      categoryList.value = res.data.data;
      nowCategory.value = res.data.data[0];
    }
  } catch (e) {}
};

watch(
  () => route.query,
  async (newQuery, oldQuery) => {
    id.value = parseInt(newQuery.id);
  },
  { deep: true, immediate: true }
);

onMounted(() => {
  getCategoryList();
});
</script>

<template>
  <div class="topMenuBox">
    <div class="middle" @mouseleave="changeShowType(false)">
      <div class="logoBox" @click="jumpTo('/')">
        <img src="../assets/img/logo.png" alt="泽昊" />
      </div>
      <div class="rightBox" v-if="JSON.stringify(nowCategory) !== '{}'">
        <div class="menuList">
          <div
            class="menuItem"
            style="padding-left: 100px"
            @mouseover="changeShowType(true)"
          >
            {{ $t("menu.product") }}
            <!-- v-show="showType" -->
            <transition name="fade">
              <div class="productTypeList" v-show="showType">
                <div class="middle">
                  <div class="typeLeft">
                    <div
                      class="item"
                      v-for="(item, index) in categoryList"
                      :key="index"
                      :class="{ active: activeType === item.id }"
                      @mouseover="changeSubType(item)"
                    >
                      <div class="name">
                        {{ locale === "zh-cn" ? item.cate_name : item.en_cate_name }}
                      </div>
                      <el-icon size="16px"
                        ><ArrowRight :color="activeType == item.id ? '#fff' : '#000'"
                      /></el-icon>
                    </div>
                  </div>
                  <div class="typeRight">
                    <div class="subTypeList">
                      <div
                        class="item"
                        v-for="(item, index) in nowCategory.children"
                        :key="index"
                        @click="
                          jumpTo('/productList?id=' + nowCategory.id + '&subid=' + item.id)
                        "
                      >
                        <div class="imgBox">
                          <img :src="item.pic" alt="" />
                        </div>
                        <div class="name">
                          {{ locale === "zh-cn" ? item.cate_name : item.en_cate_name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
          <div class="menuItem" @click="jumpTo('/about')">{{ $t("menu.aboutUs") }}</div>
          <div
            class="menuItem"
            @click="isLogined() && jumpTo('/after')"
            v-if="locale === 'zh-cn'"
          >
            {{ $t("menu.after") }}
          </div>
          <div
            class="menuItem"
            @click="isLogined() && jumpTo('/inquiry?id=' + (!id ? '' : id))"
          >
            {{ $t("menu.inquiry") }}
          </div>
        </div>
        <div class="searchBox">
          <el-input
            v-model="productName"
            style="width: 240px"
            :placeholder="$t('menu.search')"
            :suffix-icon="Search"
            class="searchInput"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.topMenuBox {
  width: 100%;
  background-color: #fff;
  height: 70px;
  border: 1px solid #f1f1f1;

  .middle {
    display: flex;
    justify-content: space-between;
    height: 100%;

    .logoBox {
      height: 100%;
      cursor: pointer;

      img {
        height: 100%;
      }
    }

    .rightBox {
      font-size: 24px;
      display: flex;
      justify-content: space-between;
      // width: 850px;

      .menuList {
        display: flex;
        width: 720px;
        justify-content: space-between;
        margin-right: 40px;
        .menuItem {
          font-size: 14px;
          line-height: 70px;
          cursor: pointer;
          color: #333;
          padding: 0 30px;

          &:hover {
            color: var(--primary-color);
          }
        }
      }

      .searchInput {
        margin-top: 18px;
      }
    }
  }
  .productTypeList {
    position: absolute;
    background-color: #fff;
    width: 100%;
    height: 70vh;
    z-index: 10;
    border-top: 1px solid #f1f1f1;
    left: 0;
    top: 100px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 30px 34px -15px;

    .middle {
      justify-content: flex-start;
    }

    .typeLeft {
      height: 100%;
      overflow-y: auto;
      width: 190px;
      border-right: 1px solid #f1f1f1;

      .item {
        display: flex;
        line-height: 60px;
        cursor: pointer;
        justify-content: space-between;
        padding-left: 10px;
        padding-right: 5px;

        .name {
          font-size: 14px;
          color: #333;
        }

        .el-icon {
          margin-top: 20px;
        }

        &:hover,
        &.active {
          background-color: #000;

          .name {
            color: #fff;
          }
        }
      }
    }

    .typeRight {
      // padding-left: 15px;
      width: 1210px;
      overflow-y: auto;
      .subTypeList {
        display: flex;
        flex-wrap: wrap;
        // margin-top: 5px;
        border-left: 1px solid #dcdcdc;

        .item {
          width: 300px;
          // display: flex;
          // margin-bottom: 10px;
          cursor: pointer;
          padding: 5px;
          border-right: 1px solid #dcdcdc;
          border-bottom: 1px solid #dcdcdc;
          .imgBox {
            width: 180px;
            height: 180px;
            margin: 20px auto;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .name {
            line-height: 70px;
            margin-left: 10px;
            font-weight: bold;
            font-size: 14px;
            color: #333;
            text-align: center;
          }

          &:hover {
            // background-color: #0000000d;
            box-shadow: 0 0 3px 0px #ababab61;
          }
        }
      }
    }
  }
}
.fade-enter-active, .fade-leave-active { transition: opacity .25s ease, transform .25s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(8px); }
.fade-enter-to, .fade-leave-from { opacity: 1; transform: translateY(0); }
</style>
